<template>
  <div
    class="linkage flex-row flex-align-c"
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
  >
    <div>
      <el-select
        class="el-input-resize--mini address"
        size="small"
        v-model="provinceId"
        placeholder="省级地区"
      >
        <el-option
          v-for="item in cProvince"
          :key="item.id"
          :label="item.value"
          :value="item.id"
        >
        </el-option>
      </el-select>
       <el-select
       v-if="level>=2"
        class="el-input-resize--mini address"
        size="small"
        v-model="cityId"
        placeholder="市级地区"
      >
        <el-option
          v-for="item in cCity"
          :key="item.id"
          :label="item.value"
          :value="item.id"
        >
        </el-option>
      </el-select>
       <el-select
       v-if="level>=3"
        class="el-input-resize--mini address"
        size="small"
        v-model="districtId"
        placeholder="区级地区"
      >
        <el-option
          v-for="item in cDistricts"
          :key="item.id"
          :label="item.value"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import $axios from "axios";
import defaultConfig from "./utils/config";
import Cookies from "js-cookie";
import fp from "lodash/fp";
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig;
      }
    },
    level: Number
  },
  data() {
    return {
      loading: false,
      mapJson: defaultConfig.mapJson,
      pacData: [],
      // 当前选中的省的id
      provinceId: "",
      // 当前选中的市的id
      cityId: "",
      // 当前选中的市的id
      districtId: ""
    };
  },
  computed: {
    // 当前可选的省
    cProvince() {
      return fp.flowRight(
        fp.map(arr => ({
          id: arr[0],
          value: fp.get("[1].title", arr) || ""
        })),
        fp.toPairs
      )(this.pacData);
    },
    // 当前可选的市
    cCity() {
      return fp.flowRight(
        fp.map(arr => ({
          id: arr[0],
          value: fp.get("[1].title", arr) || ""
        })),
        fp.toPairs,
        fp.get(`${this.provinceId}.cities`)
      )(this.pacData);
    },
    // 当前可选的区
    cDistricts() {
      return fp.flowRight(
        fp.map(arr => ({
          id: arr[0],
          value: fp.get("[1].title", arr) || ""
        })),
        fp.toPairs,
        fp.get(`${this.provinceId}.cities.${this.cityId}.districts`)
      )(this.pacData);
    },
    // 当选中值改变时需要传给on-change事件的参数
    cChangedValue() {
      const {provinceId,cityId,districtId}=this
      return [provinceId,cityId,districtId]
    }
  },
  watch: {
    cChangedValue(val) {
      this.emitChange(val)
    },
    provinceId() {
      this.cityId = ''
      this.districtId = ''

    },
    cityId() {
      this.districtId = ''
    },
    districtId(val) {
      console.log('districtId 22222222222',val)
    },
    'config.initList': {
      handler(val) {
        this.provinceId = fp.get('0.id',val) || ''
        this.$nextTick(()=>{
          this.cityId = fp.get('1.id',val) || ''
          this.$nextTick(()=>{
            this.districtId = fp.get('2.id',val) || ''
          })
        })
        console.log('config.initList', this.cityId,this.districtId,this.level)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    emitChange(val) {
      this.$emit('on-change',val)
    },
    getCityData: function() {
      var that = this;
      const requerBase = that.mapJson.substr(1, that.mapJson.length - 1);
      const baseRequest = `${Cookies.get("BASE_API") ||
        `${process.env.BASE_API}/`}${requerBase}`;
      $axios
        .get(baseRequest)
        .then(function(response) {
          if (response.status === 200) {
            that.pacData = response.data.data;
            console.log("this.pacData", this.pacData);
          }
        })
        .catch(function(error) {
          console.log(typeof +error);
          that.loading = false;
        });
    },
  },
  created: function() {
    // this.loading = true
    this.getCityData();

  }
};
</script>

<style lang="scss" scoped>
.linkage {
  /deep/ .el-input,
  /deep/ .el-input-number {
    width: auto !important;
    margin-right: 10px;
  }
}
</style>
